<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BFC</title>
    <style>
        p {
            margin: 30px;
            background-color: blue;
        }
    </style>
</head>
<body>
<h3>magin重叠现象</h3>
<p>123</p>
<p>abc</p>
<hr/>
<h3>触发BFC(overflow部位visible): overflow: hidden, 解决margin重叠问题</h3>
<p>123</p>
<div style="overflow: hidden;">
    <p>abc</p>
</div>

<pre>
    <code class="css">
    {
        overflow: auto; // scroll、hidden、auto
        float: left; // right
        display: block; // table-caption、inline-block、inline-table、table、inline-table、flex、inline-flex、grid、inline-grid。
        position: absolute; // fixed
      
        }
</code></pre>

</body>
</html>